<template>
  <div class="RecruitmentInfo">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>招聘信息</el-breadcrumb-item>
      <el-breadcrumb-item>招聘信息匹配</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图·-->
    <el-card class="box-card">
      <div class="info-search">
        <div class="info-search-box">
          <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select">
            <span slot="prepend" @click="areaSelect" style="cursor:pointer">{{selectedContent}}<i class="el-icon-arrow-down"></i></span>
            <el-button slot="append" icon="el-icon-search" type="success" @click="searchBtn"></el-button>
          </el-input>
        </div>
        <div class="info-search-content">
          <div class="info-search-content-select">
            <el-select v-model="workExperienceValue" placeholder="工作经验" size="small">
              <el-option v-for="item in workExperience" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="educateValue" placeholder="学历要求" size="small">
              <el-option v-for="item in educate" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="moneyRequestValue" placeholder="薪资要求" size="small">
              <el-option v-for="item in moneyRequest" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="companySizeValue" placeholder="公司规模" size="small">
              <el-option v-for="item in companySize" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="issueTimeValue" placeholder="发布时间" size="small">
              <el-option v-for="item in issueTime" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="info">
        <ul class="info-ul" v-infinite-scroll="loadData" style="overflow:auto">
          <li class="info-ul-li" v-for="(item, index) in searchInfo" :key="index" @click="showLookDialog(item)">
            <el-card>
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6" style="color:#5dbe8a;margin-bottom:5px">{{item.recruitmentTitle}}</el-col>
                    <el-col :span="7" style="color:#5dbe8a;">{{item.recruitmentAddress}}</el-col>
                    <el-col :span="8" style="color:#000;font-size:15px;">发布于{{item.recruitmentTime}}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="3" style="color:#fbcd31;margin-bottom:5px">{{item.recruitmentMoney}}</el-col>
                    <el-col :span="5" style="color:#c0c0c0;font-size:15px;">{{item.recruitmentEducate}}</el-col>
                  </el-row>
                  <el-row>
                    <el-tag v-for="(subItem, subIndex) in item.recruitmentTag" effect="plain" size="small" :key="subIndex">{{subItem}}</el-tag>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row style="color:#5dbe8a;margin-bottom:5px">{{item.recruitmentCompany}}</el-row>
                  <el-row style="margin-bottom:5px;font-size:15px;">{{item.recruitmentPeople}}</el-row>
                  <el-row>
                    <el-tag v-for="(subItem, subIndex) in item.recruitmentWealth" effect="plain" size="small" :key="subIndex">{{subItem}}</el-tag>
                  </el-row>
                </el-col>
              </el-row>
            </el-card>
          </li>
        </ul>
      </div>
    </el-card>
    <el-dialog :visible.sync="addressDialog" width="700px" class="addressDialogStyle">
      <span class="addressDialogStyleOne">
        <span style="font-weight:bold">当前选择：<span style="color:#f4ce69">{{selectedArea}}</span></span>
        <span class="el-icon-delete" @click="deleteSelectedArea" v-if="areaStatus != 1"></span>
      </span>
      <div class="addressDialogStyleTwo">
        <span v-if="areaStatus == 1">
          <el-tag v-for="(item,index) in areaListOne" :key="index" type="info" effect="plain" @click="selectedCity(item)" >{{item.city}}</el-tag>
        </span>
        <span v-if="areaStatus == 2">
          <el-tag v-for="(item,index) in areaListTwo" :key="index" type="info" effect="plain" @click="selectedCity(item)">{{item.city}}</el-tag>
        </span>
        <span v-if="areaStatus == 3">
          <el-tag v-for="(item,index) in areaListThree" :key="index" type="info" effect="plain" @click="selectedCity(item)">{{item}}</el-tag>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addressDialog = false">取消</el-button>
        <el-button type="warning" @click="addressDialog = false">立即查询</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="lookDialog" width="700px" class="lookDialogStyle">
      <div class="lookDialogStyleOne">
        <div>{{currentPosition.recruitmentTitle}}</div>
        <div>
          <span><i class="el-icon-office-building"></i>&nbsp;<span>{{currentPosition.recruitmentAddress}}</span>&nbsp;·&nbsp;<span>{{currentPosition.recruitmentEducate}}</span></span>
          <span><span>小明</span>&nbsp;·&nbsp;<span>科技副总裁</span>&nbsp;<span>{{currentPosition.recruitmentMoney}}</span></span>
        </div>
        <div>
          <el-tag v-for="(subItem, subIndex) in currentPosition.recruitmentWealth" :key="subIndex" effect="plain" type="primary" size="small">{{subItem}}</el-tag>
        </div>
      </div>
      <div class="lookDialogStyleTwo">
        <div class="lookDialogStyleTwoLeft">
          <el-collapse v-model="activeId" accordion>
            <el-collapse-item title="职位描述" name="1">
              <div>工作岗位：兼职助教</div>
              <div>工作地点：西安雁塔区创意盒子</div>
              <div>工作内容：学科答疑、作业批改，线上直播课的跟踪维护，微信带号，日常学员情况的跟踪维护，客户管理，电话回访</div>
              <div>工作时间：2月6号—2月底 10:00-18:00 线下坐班（因寒假期间可能会根据业务部门安排加班）</div>
            </el-collapse-item>
            <el-collapse-item title="公司介绍" name="2">
              <div>盐课堂是一家冉冉升起的K-12在线教育新星, 致力于为中小学生提供本地名师大班网课的在线教育企业。
                基于各地考情、学情差异，盐课堂率先提出“本地网课更有效”，始终坚持本地化教学，目前在厦门、西安、
                郑州、合肥、南昌、济南、武汉等11城市建立了教学教研中心，累计服务数百万学员。</div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="lookDialogStyleTwoRight">
          <div class="companyBaseInfo">公司基本信息</div>
          <div><i class="el-icon-school"></i>中信建投证券</div>
          <div><i class="el-icon-finished"></i>已上市</div>
          <div><i class="el-icon-user"></i>10000人以上</div>
          <div><i class="el-icon-connection"></i>互联网金融</div>
          <div><i class="el-icon-thumb"></i>https://www.csc108.com</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="lookDialog = false">取消</el-button>
        <el-button type="success" @click="lookDialog = false">立即沟通</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selectedContent:'西安·新城区·长乐路 ',
        searchValue:'',
        // 精准地址对话框
        addressDialog:false,
        selectedArea:'',
        areaListOne:[
          {city:'北京',cityItem:[{city:'朝阳区',cityItem:['酒仙桥','大望路','国贸']},{city:'海定区',cityItem:['中关村','五道口','万寿寺']},{city:'大兴区',cityItem:['丰泽','世界公园','分钟寺']}]},
          {city:'上海',cityItem:[{city:'闽东新区',cityItem:['金桥','康桥','三林']},{city:'静安区',cityItem:['金桥','康桥','三林']},{city:'宝山区',cityItem:['丰泽','世界公园','分钟寺']}]},
          {city:'广州',cityItem:[{city:'白云区',cityItem:['酒仙桥','大望路','国贸']},{city:'黄埔区',cityItem:['中关村','五道口','万寿寺']},{city:'南沙区',cityItem:['始播','会理','分钟寺']}]}
        ],
        areaStatus:1,
        areaListTwo:[],
        areaListThree:[],
        // 工作经验
        workExperience: [{
          value: '1',
          label: '不限'
        }, {
          value: '2',
          label: '在校生'
        }, {
          value: '3',
          label: '应届生'
        }, {
          value: '4',
          label: '1年以内'
        }, {
          value: '5',
          label: '1-3年'
        }],
        // 工作经验
        workExperienceValue: '',
        educate:[{
          value: '1',
          label: '不限'
        }, {
          value: '2',
          label: '初中'
        }, {
          value: '3',
          label: '高中'
        }, {
          value: '4',
          label: '专科'
        }, {
          value: '5',
          label: '本科'
        },{
          value: '6',
          label: '硕士'
        },{
          value: '7',
          label: '博士'
        }],
        educateValue:'',
        //薪资要求
        moneyRequest:[{
          value: '1',
          label: '不限'
        }, {
          value: '2',
          label: '3k以下'
        }, {
          value: '3',
          label: '3-5k'
        }, {
          value: '4',
          label: '5-8k'
        }, {
          value: '5',
          label: '8-10k'
        },{
          value: '6',
          label: '10-30k'
        },{
          value: '7',
          label: '30-50k'
        }],
        moneyRequestValue:'',
        // 公司规模
        companySize:[{
          value:'1',
          label:"不限"
        },{
          value:'2',
          label:"0-20人"
        },{
          value:'3',
          label:"20-99人"
        },{
          value:'4',
          label:"100-499人"
        },{
          value:'5',
          label:"500-999人"
        },{
          value:'6',
          label:"1000-9999人"
        },{
          value:'7',
          label:"10000人以上"
        }],
        companySizeValue:'',
        // 发布时间
        issueTime:[{
          value: '1',
          label: '不限'
        }, {
          value: '2',
          label: '一天以内'
        }, {
          value: '3',
          label: '三天以内'
        }, {
          value: '4',
          label: '一周以内'
        }, {
          value: '5',
          label: '半月以内'
        },{
          value: '6',
          label: '一个月以内'
        }],
        issueTimeValue:'',
        searchInfo:[
          {recruitmentTitle:'辅导老师实习生',recruitmentAddress:'西安·新城区·万寿路',recruitmentTime:'2020-01-01',recruitmentMoney:'4-5k',recruitmentEducate:'在校/本科',recruitmentTag:['教师','教研','物理'],recruitmentCompany:'卓越教育',recruitmentPeople:'1000-2000人',recruitmentWealth:['五险一金','全勤奖']},
          {recruitmentTitle:'物理老师',recruitmentAddress:'西安·新城区·长乐路',recruitmentTime:'2020-01-02',recruitmentMoney:'4-5k',recruitmentEducate:'在校/应届',recruitmentTag:['教师','物理'],recruitmentCompany:'网易教育',recruitmentPeople:'1000-4000人',recruitmentWealth:['五险一金','包吃']},
          {recruitmentTitle:'老师实习生',recruitmentAddress:'西安·新城区·万寿路',recruitmentTime:'2020-01-01',recruitmentMoney:'4-5k',recruitmentEducate:'在校/本科',recruitmentTag:['教师','教研','物理'],recruitmentCompany:'卓越教育',recruitmentPeople:'1000-2000人',recruitmentWealth:['五险一金','全勤奖']},
          {recruitmentTitle:'数学老师',recruitmentAddress:'西安·新城区·长乐路',recruitmentTime:'2020-01-02',recruitmentMoney:'4-5k',recruitmentEducate:'在校/应届',recruitmentTag:['教师','物理'],recruitmentCompany:'网易教育',recruitmentPeople:'1000-4000人',recruitmentWealth:['五险一金','包吃']}
        ],
        queryInfo:{
          pageIndex:1,
          pageSize:10,
          recordSum:5
        },
        // 职位详细信息弹框
        lookDialog:false,
        // 职位详细信息
        currentPosition:{},
        // 折叠下标索引
        activeId:'1',
        // 关键词
        keywords:'北京大学',
        city:'beijing',
        types:'高等院校'
      }
    },
    created() {
      // this.$http.get('https://lbs.amap.com/dev/api?keywords='+this.$data.keywords+'&city='+
      // this.$data.city+'&types='+this.$data.types+'&children=1&offset='+this.$data.queryInfo.pageSize+"&page="+
      // this.$data.queryInfo.pageIndex+'&key=ec653e160f3c7f28b04c133e0f4c8468&extensions=all',{},{
      //   headers:{
      //     'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
      //   }
      // })
      // .then((res) => {
      //   console.log(res)
      // })
      // .catch((err) => {
      //   console.log(err)
      // })
    },
    methods:{
      // 地域选择弹框
      areaSelect() {
        this.$data.addressDialog = true
      },
      selectedCity(row) {
        if (this.$data.areaStatus == 1) {
          this.selectedCityOne(row)
          this.$data.areaStatus += 1
          this.$data.selectedArea += row.city + ' > '
        } else if (this.$data.areaStatus == 2) {
          this.selectedCityTwo(row)
          this.$data.areaStatus += 1
          this.$data.selectedArea += row.city + ' > '
        } else if (this.$data.areaStatus == 3) {
          this.$data.selectedArea = this.$data.selectedArea.replace(/^(.*?)>(.*?)>(.*?)$/,"$1>$2>")
          this.$data.selectedArea += row
          this.$data.selectedContent = this.$data.selectedArea
          this.$data.addressDialog = false
        }
      },
      // 地域选择
      selectedCityOne(row) {
        this.$data.areaListTwo = row.cityItem
      },
      selectedCityTwo(row) {
        this.$data.areaListThree = row.cityItem
      },
      // 清空地域选择
      deleteSelectedArea() {
        this.$data.selectedArea = ''
        this.$data.areaStatus = 1
      },
      // 搜索简历
      searchBtn() {
        console.log("search")
      },
      // 职位详细信息
      showLookDialog(row){
        this.$data.currentPosition = row
        this.$data.lookDialog = true
      },
      // 动态信息加载
      loadData() {
        console.log("1")
      }
    }
  }
</script>

<style lang="less" scoped>
  .info-search {
    min-width: 200px;
    .info-search-box{
      margin-top: 15px;
      .el-button{
        width:100px
      }
    }
  }
  .info-search-content-select{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
  }
  .info{
    .info-ul{
      height: 330px;
      .info-ul-li{
        list-style: none;
        display: inline-block;
        margin: 5px auto;
        min-width: 1050px;
      }
      .info-ul-li:hover{
        cursor: pointer;
      }
    }
  }
  .addressDialogStyle{
    .addressDialogStyleOne span:nth-child(2){
      margin-left: 10px;
    }
    .addressDialogStyleOne .el-icon-delete:hover{
      cursor: pointer;
    }
    .addressDialogStyleTwo{
      height: 300px;
      padding:30px 0;
      .el-tag{
        margin:5px
      }
    }
  }
  .lookDialogStyle{
    .lookDialogStyleOne div{
      margin: 10px 0;
    }
    .lookDialogStyleOne div:nth-child(1){
      font-size: 30px;
      font-weight: bold;
    }
    .lookDialogStyleOne div:nth-child(2){
      width: 90%;
      display: flex;
      flex-direction: row;
      align-content: center;
      justify-content: space-between;
    }
    .lookDialogStyleOne div:nth-child(2) span:nth-child(1) span:nth-child(2){
      color: #2fd653;
    }
    .lookDialogStyleOne div:nth-child(2) span:nth-child(1) span:nth-child(3){
      color: #c0c0c0;
    }
    .lookDialogStyleOne div:nth-child(2) span:nth-child(2) span{
      font-weight: bold;
    }
    .lookDialogStyleOne div:nth-child(2) span:nth-child(2) span:nth-child(3){
      color: orange;
    }
    .lookDialogStyleOne div:nth-child(3){
      span{
        margin-right: 10px;
      }
      .el-tag{
        width: 70px;
        border-radius: 100px;
        text-align: center;
      }
    }
    .lookDialogStyleTwo{
      display: flex;
      flex-direction: row;
      align-content: center;
      justify-content: space-between;
    }
    .lookDialogStyleTwo div:nth-child(1){
      flex: 2;
    }
    .lookDialogStyleTwo div:nth-child(2){
      flex: 1;
      .companyBaseInfo{
        display: flex;
        justify-content: center;
        font-size: 15px;
        padding: 5px 0;
        font-weight: 600;
      }
    }
    .lookDialogStyleTwoLeft{
      height: 300px;
    }
    .lookDialogStyleTwoRight{
      padding: 5px;
      // border: 1px solid transparent;
      // background: linear-gradient(white, white) padding-box,
      //             repeating-linear-gradient(45deg, rgb(241, 29, 29) 0, rgb(218, 80, 80) 12.5%, transparent 0, transparent 25%, 
      //               rgb(95, 152, 190) 0, rgb(66, 114, 146) 37.5%, transparent 0, transparent 50%);
    }
    .lookDialogStyleTwo div:nth-child(2) i{
      color: grey;
      margin-right: 5px;
    }
  }
  .el-tag{
    margin-right:5px
  }
</style>